const path = require("path");
const { VueLoaderPlugin } = require("vue-loader")
// const chalk = require('chalk')
// const ProgressBarPlugin = require('progress-bar-webpack-plugin')
// const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: './[name].js',
    },
    resolve: {
        // 将 `.ts` 添加为一个可解析的扩展名。
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
        alias: {
            '@': path.resolve(__dirname, "src"), // @ 代表 src 路径
        },
    },
    devtool: 'inline-source-map', // 帮助发现错误
    // 第三方插件
    externals: {
        jquery: 'jQuery'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: "vue-loader"
            },
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                },
                exclude: /node_modules/,
            },
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                type: "asset/resource"
            }
        ]
    },
    plugins: [
        // vue loader 解析
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[hash].[name].css",
        }),
        // new BundleAnalyzerPlugin(),
        // // 进度条
        new require('progress-bar-webpack-plugin')({
            // format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
            format: `  :msg [:bar]  (:elapsed s)`
        }),
        // 分析那些文件加载时间长
        new require("speed-measure-webpack-plugin")({}),
        new require('webpack-bundle-analyzer').BundleAnalyzerPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            minify: {
                removeAttributeQuotes: false, //是否删除属性的双引号
                collapseWhitespace: false, //是否折叠空白
            },
            // hash: true //是否加上hash，默认是 false
        })
    ],
    devServer: {
        // static: './dist',
        // open: true,
        port: 3333,
        hot: true, // 热更新
    },
    // 缓存提高速度
    cache: {
        type: 'filesystem', // 使用文件缓存
    },
    optimization: {
        runtimeChunk: true,
        minimizer: [
            // 压缩 js
            new TerserPlugin({
                parallel: 4,
                terserOptions: {
                    parse: {
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2,
                    },
                    mangle: {
                        safari10: true,
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        ascii_only: true,
                    },
                },
            }),
            // 分离压缩 css
            new CssMinimizerPlugin({
                parallel: 4,
            }),
        ],
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
            // 重复打包问题
            cacheGroups: {
                vendors: { // node_modules里的代码
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    // name: 'vendors', 一定不要定义固定的name
                    priority: 10, // 优先级
                    enforce: true
                }
            }
        },
    },
}